import React, { useState, useEffect } from 'react'
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { Button, Form, Input, Card, message } from 'antd';
import hospitalSetApi, { type HospitalSetSaveData } from '@/api/hospital/model/hospitalSet'


export default function AddHospitalSet() {
    // 获取跳转
    const navigate = useNavigate()
    const { id } = useParams()
    const location = useLocation().state as HospitalSetSaveData
    // console.log(location);
    const rgx = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

    const [form] = Form.useForm()
    form.setFieldsValue(location)
    // 这是表单中默认的按钮触发之后的函数
    // 表单的效验都没有问题的时候触发这里
    const onFinish = async (values: any) => {
        // 判断我们的id是否存在
        if (id) {
            // 如果存在id那么我们需要给我们的数据添加一个id
            values.id = id
            await hospitalSetApi.saveHospitalSet(values)
        } else {
            // 没有就是直接发送请求但是不会设置id属性
            await hospitalSetApi.saveHospitalSet(values)
        }
        // 全部都完成之后进行跳转会设置列表，并且进行提示
        navigate('/syt/hospital/hospitalSet');
        message.success(`${id ? '修改' : '添加'}成功`)

    };
    // 如果表单中出现错误的时候会触发这里
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div>
            <Card>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="医院名称"
                        name="hosname"
                        rules={[{ required: true, message: '必须填写一个医院名称' }]}
                    >
                        <Input placeholder='医院名称' />
                    </Form.Item>
                    <Form.Item
                        label="医院编码"
                        name="hoscode"
                        rules={[{ required: true, message: '必须填写一个医院编码' }]}
                    >
                        <Input placeholder='医院编码' />
                    </Form.Item>
                    <Form.Item
                        label="api基础路径"
                        name="apiUrl"
                        rules={[{ required: true, message: '必须填写一个api基础路径' }]}
                    >
                        <Input placeholder='api基础路径' />
                    </Form.Item>
                    <Form.Item
                        label="联系人姓名"
                        name="contactsName"
                        rules={[{ required: true, message: '必须填写一个联系人姓名' }]}
                    >
                        <Input placeholder='联系人姓名' />
                    </Form.Item>
                    <Form.Item
                        label="联系人手机号"
                        name="contactsPhone"
                        rules={[{ required: true, message: '手机号格式不正确', pattern: rgx }]}
                    >
                        <Input placeholder='联系人手机号' />
                    </Form.Item>
                    <Form.Item
                        label=" "
                        colon={false}
                    >
                        <Button type="primary" style={{ marginRight: '15px' }} htmlType="submit">保存</Button>
                        <Button onClick={() => {
                            navigate('/syt/hospital/hospitalSet')
                        }}>返回</Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
